<!--
 * @Author: fyukeeh 15849141465@163.com
 * @Date: 2025-08-04 15:21:26
 * @LastEditors: fyukeeh 15849141465@163.com
 * @LastEditTime: 2025-08-04 15:50:53
 * @FilePath: \mapbox\src\views\example\RadarScanExample.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="width: 100vw; height: 100vh; position: relative;">
    <div id="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import Map from '289-map';

onMounted(() => {
  const map = new Map('map', {
    style: 'https://demotiles.maplibre.org/style.json',
    scene: {
      center: { lng: 113.5, lat: 34.8, pitch: 0 },
      zoom: 3,
    },
    controller: ['showZoom', 'showCompass', 'globe', 'visualizePitch'],
    type: 'globe',
  });

  map.on('load', () => {
    // 添加雷达扫描实体
    const radar = new Map.Graphic.RadarScan({
      position: [113.5, 34.8],
      radius: 15000,
      altitude: 0,
      color: '#ff0000',
      opacity: 0.55, // 降低透明度，让扇面更透明
      scanSpeed: 80, // 度/秒
      startAngle: 0,
      sweepAngle: 90, // 设置为90度
    });
    radar.render(map);
  });
});
</script>